<!DOCTYPE html>
<html class="signin no-js" lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <title th:text="${order.siteName} + ' - 支付宝扫码支付'"></title>
    <meta name="keywords" th:content="${config.keywords}">
    <meta name="description" th:content="${config.decText}">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="/static/layer/mobile/need/layer.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="/static/css/codepay/wechat_pay.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="body">
    <h1 class="mod-title">
        <span class="ico_log ico-1"></span>
    </h1>
    <div class="mod-ct">
        <div class="order">
        </div>
        <div class="amount" id="money" th:text="'￥'+${order.price}"></div>
        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" style="width: 230px;height: 230px;margin: 0 auto;" class="qrcode-img-area"
                 id="qrcode"></div>
        </div>
        <div class="time-item">
            <div class="time-item" id="msg"><h1>付款后自动到账 未到账可联系我们</h1></div>
            <strong id="hour_show"><s id="h"></s>0时</strong>
            <strong id="minute_show"><s></s>05分</strong>
            <strong id="second_show"><s></s>53秒</strong>
        </div>
        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
                <p>请使用支付宝扫一扫</p>
                <p>扫描二维码完成支付</p>
            </div>
        </div>
        <div class="detail" id="orderDetail">
            <dl class="detail-ct" id="desc" style="display: none;">
                <dt>商家</dt>
                <dd id="storeName" th:text="${order.siteName}"></dd>
                <dt>购买物品</dt>
                <dd id="productName" th:text=">${order.title}"></dd>
                <dt>商户订单号</dt>
                <dd id="billId" th:text="${order.outOrderId}"></dd>
                <dt>创建时间</dt>
                <dd id="createTime" th:text="${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></dd>
            </dl>
            <a href="javascript:void(0)" class="arrow"><i class="ico-arrow"></i></a>
        </div>
        <div class="tip-text">
        </div>
    </div>
    <div class="foot">
        <div class="inner">
            <p>手机用户可保存上方二维码到手机中</p>
            <p>在支付宝扫一扫中选择“相册”即可</p>
        </div>
    </div>
</div>
</body>
<script src="/static/js/qrcode.min.js"></script>
<script th:inline="javascript">

    var mobile = '[(${mobile})]';
    var qr_code = '[(${model.qr_code})]';

    var tencentSeries = 'alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=' + qr_code;

    if (mobile) {
        var isSafari = navigator.userAgent.indexOf("Safari") > -1;
        if (isSafari) {
            location.href = tencentSeries;
        } else {
            var iframe = document.createElement("iframe");
            iframe.style.display = "none";
            iframe.src = tencentSeries;
            document.body.appendChild(iframe);
        }
    }


    var qrcode = new QRCode("qrcode", {
        text: qr_code,
        width: 230,
        height: 230,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    window.onload = loadmsg();

    // 检查是否支付完成
    function loadmsg() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/payment/wx_order_state",
            timeout: 8000,
            data: {oid: '[(${order.id})]', "times": new Date().getDate()}, //post数据
            success: function (data, textStatus) {
                if (data.status == 2) {
                    layer.msg('支付成功，正在跳转中...', {icon: 16, shade: 0.01, time: 15000});
                    window.location.href = data.backurl;
                } else {
                    setTimeout("loadmsg()", 1500);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    setTimeout("loadmsg()", 1500);
                } else { //异常
                    setTimeout("loadmsg()", 3000);
                }
            }
        });
    }

    var myTimer;

    function timer(intDiff) {
        var i = 0;
        myTimer = window.setInterval(function () {
            i++;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
            if (hour <= 0 && minute <= 0 && second <= 0) {
                window.location.href = '[(${ret_url})]';
                clearInterval(myTimer);

            }
            intDiff--;
        }, 1000);
    }

    $(document).ready(function () {
        $(function () {
            timer(300);
        });
        $('#orderDetail .arrow').click(function (event) {
            if ($('#orderDetail').hasClass('detail-open')) {
                $('#orderDetail .detail-ct').slideUp(500, function () {
                    $('#orderDetail').removeClass('detail-open');
                });
            } else {
                $('#orderDetail .detail-ct').slideDown(500, function () {
                    $('#orderDetail').addClass('detail-open');
                });
            }
        });
    });

</script>
</html>



